<template>
  <view class="category">
    <!-- 搜索框 -->
    <search-input></search-input>
    <!-- /搜索框 -->
    <view class="category-content">
      <!-- 左侧列表 -->
      <scroll-view scroll-y class="category-left">
        <view
          class="category-left-item"
          v-for="(item, index) in leftMenuList"
          :key="index"
          :class="{ 'active' : currentIndex === index }"
          @click="handleItemClick(index)"
        >
          {{ item }}
        </view>
      </scroll-view>
      <!-- /左侧列表 -->
      <!-- 右侧列表 -->
      <scroll-view scroll-y class="category-right">
        <view class="category-right-item" v-for="(item, index) in rightContent[currentIndex]" :key="index">
          <view class="right-item-title">/{{ item.cat_name }}/</view>
          <view class="right-item-content">
            <view
              class="right-item-item"
              v-for="(list, index) in item.children"
              :key="index"
              @click="handleToDetail(item.cat_id, item.cat_name)"
            >
              <image mode="widthFix" :src="list.cat_icon"></image>
              <text>{{ list.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      <!-- 右侧列表 -->
    </view>
  </view>
</template>

<script>
  import searchInput from '@/components/searchInput.vue'
  import { categoryMenu } from '@/utils/request.js'
  export default {
    data() {
      return {
        currentIndex: 0, // 被点击的按钮的索引号
        leftMenuList: [], //左侧菜单数据
        rightContent: [] //右侧商品数据
      }
    },
    components: {
      searchInput
    },
    onLoad () {
      this.loadData()
    },
    methods: {
      loadData () {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
          mask: true
        })
        categoryMenu().then(res => {
          if (res.statusCode === 200) {
            this.leftMenuList = res.data.message.map(v => v.cat_name)
            this.rightContent = res.data.message.map(v => v.children)
          }
        })
      },
      
      handleItemClick (index) {
        this.currentIndex = index
      },
      
      // 去往详情页面
      handleToDetail (goodsId,query) {
        uni.navigateTo({
          url: `/pages/goodsList/goodsList?cid=${goodsId}&query=${query}`
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .category-content {
    display: flex;
    width: 100%;
    height: calc(100vh - 90rpx);
    .category-left {
      flex: 2;
      .category-left-item {
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        border-left: 3rpx solid transparent;
        color: #000;
        transition: all .5s;
      }
      .active {
        color: #eb4450;
        border-color: #eb4450;
        background-color: #fff;
      }
    }
    .category-right {
      flex: 5;
      .category-right-item {
        .right-item-title {
          display: flex;
          justify-content: center;
          height: 60rpx;
          line-height: 60rpx;
        }
        .right-item-content {
          display: flex;
          flex-wrap: wrap;
          .right-item-item {
            width: 33.33%;
            padding: 10rpx;
            text-align: center;
            image {
              width: 100%;
            }
            text {
              color: #333;
              font-size: 30rpx;
            }
          }
        }
      }
    }
  }
</style>
